<script setup lang="ts">
import { Subject } from 'rxjs';
import { ctrlState } from './main-form-state';
import { FormControl, IActionParam, IParam, ControlAction, IContext } from '@core';
import SysUserRoleGridView from '@views/rt/sys-user-role-grid-view';
interface Props {
  name:string,
  context: IContext;
  viewParams?: IParam;
  controlAction: ControlAction;
  showBusyIndicator?: boolean;
  viewSubject: Subject<IActionParam>;
}

const props = withDefaults(defineProps < Props > (), {
  viewSubject: () => new Subject < IActionParam > (),
  showBusyIndicator: true,
})

// emit声明
interface CtrlEmit {
  (name: "ctrlEvent", value: IActionParam): void;
}

const emit = defineEmits <CtrlEmit> ();

// 安装功能模块，提供状态和能力方法
const { name, state, load, loadDraft, save, remove, refresh, onEditorEvent, onComponentEvent, getData } = new FormControl(ctrlState, props, emit).moduleInstall();

// 暴露内部状态及能力
defineExpose({ name, state, load, loadDraft, save, remove, refresh, getData });
</script>
<template>
  <a-form name="Main" class="app-form" style="" :model="state.data" :rules="state.rules">
<AppFormGroup 
  name="group1"
  title="系统角色基本信息"
  :visible="state.detailsModel.group1.visible" 
  :layoutOpts="{selfLayout: 'TABLE_24COL',parentLayout: 'TABLE_24COL',colMD: 24,}"
  :infoGroupMode="false"
  :titleBarCloseMode="0"
  :showCaption="true"
  :uIActionGroup="state.detailsModel.group1.uIActionGroup"
  @componentEvent="onComponentEvent">
  <AppFormItem 
    name="sys_rolename"
    label="角色名称"
    :labelWidth="130"
    :rules="state.rules.sys_rolename"
    :required="state.detailsModel.sys_rolename.required"
    :visible="state.detailsModel.sys_rolename.visible" 
    :layoutOpts="{parentLayout: 'TABLE_24COL',colMD: 24,}"
  >
    <div class="form-editor-container" style="">
<AppInput
  name="sys_rolename"
  :disabled="state.detailsModel.sys_rolename.disabled"
  :maxLength="200"
  type="text"
  :value="state.data.sys_rolename"
  @editorEvent="onEditorEvent"
/> 
    </div>
  </AppFormItem>
  <AppFormItem 
    name="memo"
    label="备注"
    :labelWidth="130"
    :rules="state.rules.memo"
    :required="state.detailsModel.memo.required"
    :visible="state.detailsModel.memo.visible" 
    :layoutOpts="{parentLayout: 'TABLE_24COL',colMD: 24,}"
  >
    <div class="form-editor-container" style="">
<AppInput
  name="memo"
  :disabled="state.detailsModel.memo.disabled"
  :maxLength="1000"
  :showMaxLength="true"
  type="textarea"
  :value="state.data.memo"
  @editorEvent="onEditorEvent"
/> 
    </div>
  </AppFormItem>
<AppFormDruipart 
  name="druipart1" 
  title="" 
  :visible="state.detailsModel.druipart1.visible"
  :layoutOpts="{parentLayout: 'TABLE_24COL',colMD: 24,}"
  :context="context"
  :viewParams="viewParams"
  :data="state.data"
  :viewSubject="state.viewSubject">
    <template #default="druipartParams">
      <SysUserRoleGridView
        :class="['app-view-layout--from-druipart']"
        :context="druipartParams.context"
        :viewParams="druipartParams.viewParams"
        :viewDefaultUsage="false"
        :noViewCaption="true"
        @viewEvent="druipartParams.viewEvent"
      >
      </SysUserRoleGridView>
    </template>
</AppFormDruipart></AppFormGroup>
  </a-form>
</template>
<style lang="scss">
  .app-form {
    .ant-card-head {
      padding: 0;
      margin: 0 10px;
    }
  }
</style>